<template>
	<div class="script-box">
		<el-form ref="scriptFormRef" :model="scriptForm" :rules="scriptRules" label-width="80px"
			class="script-form">
			<el-form-item label="脚本ID" prop="scriptId">
				<el-input v-model="scriptForm.scriptId" placeholder="请输入脚本ID"></el-input>
			</el-form-item>
			<el-form-item label="脚本名称" prop="scriptName">
				<el-input type="text" v-model="scriptForm.scriptName" placeholder="请输入脚本名称"></el-input>
			</el-form-item>
			<el-form-item label="脚本内容" prop="scriptContent">
				<el-input v-model="scriptForm.scriptContent" type="text" placeholder="请输入脚本内容"></el-input>
			</el-form-item>
			<el-form-item label="作者" prop="userName">
				<el-input type="text" v-model="scriptForm.userName" placeholder="请输入作者名"></el-input>
			</el-form-item>
			<el-form-item label="脚本状态" prop="scriptStatus">
				<el-input v-model="scriptForm.scriptStatus" type="text" placeholder="请输入脚本状态"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSubmit(scriptFormRef)">确定</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
	import {
		ElMessage
	} from 'element-plus'
	import axios from 'axios';
	import {
		ref,
		reactive
	} from 'vue'

	const emits = defineEmits(['refreshEvent'])

	// 初始化响应式表单对象
	const scriptForm = ref({
		scriptId: null,
		scriptName: "",
		scriptContent: "",
		userName:"",
		scriptStatus:""
	})
	const scriptFormRef = ref()
	// 表单校验规则
	const scriptRules = reactive({
		scriptId: [{
			required: true,
			message: '请输入脚本ID',
			trigger: 'blur'
		}],
		scriptName: [{
			required: true,
			message: '请输入脚本名称',
			trigger: 'blur'
		}],
		scriptContent: [{
			required: true,
			message: '请输入脚本内容',
			trigger: 'blur'
		}],
		userName: [{
			required: true,
			message: '请输入作者名',
			trigger: 'blur'
		}],
		scriptStatus: [{
			required: true,
			message: '请输入脚本状态',
			trigger: 'blur'
		}],
	})

	// 监听点击确定按钮时 执行的方法
	const handleSubmit = async (formEl) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				// 校验成功 调用新增接口
				handleAdd()
			}
		})
	}
	const handleAdd = () => {
		axios.post('api/script/script/add', scriptForm.value).then(res => {
			if (res.data.code == 200) {
				ElMessage({
					message: '新增成功',
					type: 'success'
				})
				// 关闭弹窗
				emits('refreshEvent')
			} else {
				ElMessage({
					message: '新增失败',
					type: 'error'
				})
			}
		}).catch(err => {})
	}
</script>

<style scoped>
	.script-box {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.script-form {
		width: 400px;
		padding: 20px;
		border-radius: 5px;
	}
</style>